import React, { useState, useRef } from 'react';
import { TextInput, StyleSheet, View, Text } from 'react-native';
import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
import { Tester, TestSuite, TestCase } from '@rnoh/testerino';

const Labels = ['Username', 'Password', 'Firstname', 'Lastname', 'Address', 'Phone', 'Email', 'QQ', 'WeChat', 'Webo'];

export const ExtraHeight: React.FC = (): JSX.Element => {
    const scrollViewRef = useRef<KeyboardAwareScrollView>(null);
    const [resetScrollToCoords] = useState({ x: 20, y: 20 });
    const [enableAutomaticScroll] = useState(true);
    const [extraHeight, setExtraHeight] = useState(100);
    const [extraScrollHeight] = useState(60);
    const [enableResetScrollToCoords] = useState(true);
    const [inputValue, setInputValue] = useState('');

    const handleExtraHeightChange = (text: string) => {
        setInputValue(text);
        const heightValue = Number(text) || 0;
        setExtraHeight(heightValue);
    };

    return (
        <Tester style={{ paddingBottom: 80 }}>
            <TestSuite name='KeyboardAwareScrollView 额外高度测试'>
                <TestCase
                    itShould={`设置额外偏移量 (当前: ${extraHeight}px)`}
                    tags={['C_API']}
                    initialState={false}
                    arrange={({ setState }) => {
                        return (
                            <>
                                <Text style={styles.statusText}>
                                    extraHeight: 在TextInput聚焦时添加额外的偏移量
                                </Text>
                                <KeyboardAwareScrollView
                                    ref={scrollViewRef}
                                    style={styles.scroll}
                                    contentContainerStyle={styles.contentContainer}
                                    resetScrollToCoords={resetScrollToCoords}
                                    enableAutomaticScroll={enableAutomaticScroll}
                                    extraHeight={extraHeight}
                                    extraScrollHeight={extraScrollHeight}
                                    enableResetScrollToCoords={enableResetScrollToCoords}
                                    enableOnAndroid={true}
                                    keyboardShouldPersistTaps="handled"
                                    viewIsInsideTabBar={true}
                                >
                                    <View style={styles.controlSection}>
                                        <Text style={styles.controlLabel}>
                                            设置额外偏移量 (px):
                                        </Text>
                                        <TextInput 
                                            keyboardType='numeric'
                                            style={styles.heightInput}
                                            placeholder='输入额外高度值'
                                            value={inputValue}
                                            onChangeText={handleExtraHeightChange}
                                            onEndEditing={(event) => {
                                                const heightValue = Number(event.nativeEvent.text) || 0;
                                                setExtraHeight(heightValue);
                                                setState(true);
                                            }}
                                            placeholderTextColor="#999"
                                        />
                                        <Text style={styles.heightInfo}>
                                            当前额外偏移量: {extraHeight}px
                                        </Text>
                                        </View> 
                                    
                                    {Labels.map((item, index) => (
                                        <View key={item} style={styles.inputContainer}>
                                            <Text style={styles.label}>{item}:</Text>
                                            <TextInput 
                                                style={styles.input} 
                                                placeholder='请输入内容' 
                                                placeholderTextColor="#999"
                                            />
                                            <Text style={styles.indexText}>
                                                输入框 #{index + 1}
                                            </Text>
                                        </View>
                                    ))}
                                    
                                </KeyboardAwareScrollView>
                            </>
                        );
                    }}
                    assert={async ({ expect, state }) => {
                        expect(state).to.be.true;
                    }}
                />
            </TestSuite>
        </Tester>
    );
};

const styles = StyleSheet.create({
    scroll: {
        backgroundColor: '#f0f0f0',
        height: 500,
    },
    contentContainer: {
        paddingBottom: 150,
    },
    controlSection: {
        marginBottom: 20,
        paddingHorizontal: 20,
        backgroundColor: '#fff',
        padding: 15,
        borderRadius: 10,
    },
    controlLabel: {
        fontSize: 16,
        fontWeight: 'bold',
        marginBottom: 10,
        color: '#333',
    },
    heightInput: {
        borderWidth: 1,
        borderColor: '#2196F3',
        height: 50,
        borderRadius: 8,
        fontSize: 16,
        paddingHorizontal: 12,
        backgroundColor: '#f0f8ff',
        marginBottom: 10,
    },
    heightInfo: {
        fontSize: 14,
        color: '#2196F3',
        fontWeight: '500',
        marginBottom: 5,
    },
    inputContainer: {
        marginBottom: 15,
        paddingHorizontal: 20,
    },
    label: {
        fontSize: 16,
        fontWeight: 'bold',
        marginBottom: 5,
        color: '#333',
    },
    input: {
        width: '100%',
        borderWidth: 1,
        borderColor: '#ccc',
        height: 50,
        borderRadius: 8,
        fontSize: 16,
        paddingHorizontal: 12,
        backgroundColor: '#fff',
    },
    indexText: {
        fontSize: 12,
        color: '#666',
        fontStyle: 'italic',
    },
    statusText: {
        textAlign: 'center',
        marginVertical: 10,
        fontWeight: 'bold',
        color: '#2196F3',
        paddingHorizontal: 20,
        fontSize: 16,
    },
    infoText: {
        textAlign: 'center',
        marginVertical: 10,
        color: '#666',
        fontStyle: 'italic',
        paddingHorizontal: 20,
        fontSize: 14,
    },
    testNote: {
        marginTop: 20,
        marginBottom: 40,
        paddingHorizontal: 20,
        backgroundColor: '#f9f9f9',
        padding: 15,
        borderRadius: 8,
    },
    noteTitle: {
        fontSize: 16,
        fontWeight: 'bold',
        color: '#FF5722',
        marginBottom: 10,
    },
    noteText: {
        fontSize: 14,
        color: '#666',
        marginBottom: 5,
        lineHeight: 20,
    },
});

export default ExtraHeight;